<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页三</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="/static/component/pear/css/pear.css" />
		<link rel="stylesheet" href="/static/admin/css/other/console1.css" />
		<!-- 主 题 更 换 -->
		<style id="pearadmin-bg-color"></style>
	</head>
	<body class="pear-container">
		<div>			
			<div class="layui-row layui-col-space10">
				<div class="layui-col-xs6 layui-col-md3">
					<div class="layui-card top-panel">
						<div class="layui-card-header">总投票个数</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value1">
									{$zong.yi}
								</div>
								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
									<i class="layui-icon layui-icon-fire"></i>  
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-xs6 layui-col-md3">
					<div class="layui-card top-panel">
						<div class="layui-card-header">总候选个数</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value2">
									{$zong.er}
								</div>
								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
									<i class="layui-icon layui-icon-transfer"></i>  
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-xs6 layui-col-md3">
					<div class="layui-card top-panel">
						<div class="layui-card-header">总票数</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value3">
									{$zong.san}
								</div>
								<div class="layui-col-xs4 layui-col-md4  top-panel-tips">
									<i class="layui-icon layui-icon-praise"></i>  
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-xs6 layui-col-md3">
					<div class="layui-card top-panel">
						<div class="layui-card-header">总用户数</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value4">
									{$zong.si}
								</div>
								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
									<i class="layui-icon layui-icon-username"></i>  
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-row layui-col-space12">
                <div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-header"></div>
						<div class="layui-card-body">
                            <div id="column3" style="min-height:400px;"></div>
						</div>
					</div>
				</div>
                <!-- <div class="layui-col-md6">
					<div class="layui-card">
						<div class="layui-card-header"></div>
						<div class="layui-card-body">
							
						</div>
					</div>
				</div> -->
			</div>
		</div>
		<input type="hidden" value="{$shujuyi}" name="titlename">
		<!--</div>-->
		<script src="/static/component/layui/layui.js"></script>
		<script src="/static/component/pear/pear.js"></script>
		<script>
			layui.use(['echarts', 'jquery'], function() {
				let echarts = layui.echarts;
				var column3 = echarts.init(document.getElementById('column3'));
				// const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
				
				let $ = layui.jquery;
				var titlename = $("[name='titlename']").val();
				// console.log(titlename);
				titlename = titlename.split(',');
				// console.log(titlename);
				// console.log([{$shujuyi}]);
				var shujuyi = titlename;
				var shujuer = [{$shujuer}];
				var shujusan = [{$shujusan}];
				var shujusi = [{$shujusi}];
				option = {
					backgroundColor: '#fff',
					// tooltip: {
					// 	trigger: "axis",
					// 	padding: [8, 10],
					// 	backgroundColor: 'rgba(0,0,0,0.5)',
					// 	axisPointer: {
					// 		type: "shadow",
					// 		textStyle: {
					// 			color: "#fff"
					// 		}
					// 	}
					// },
					legend: {
						data: ['今日票数', '点击量', '总票数'],
						align: 'left',
						right: 0,
						textStyle: {
							color: "#333",
							fontSize: 14,
							fontWeight: 200
						},
						itemWidth: 14,
						itemHeight: 14,
						itemGap: 35
					},
					grid: {
						left: '0',
						right: '0',
						bottom: '8%',
						top: '15%',
						containLabel: true
					},
					label: {
						show: true,
						position: 'top',
						color: '#333',
						fontSize: 14,
						fontWeight: 700
					},
					xAxis: [{
						type: 'category',
						offset: 10,
						// data: ['第一', '第二', '第三', '第四'],
						data: shujuyi,
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: "#333",
								fontSize: 16,
								fontWeight: 200
							}
						},
					}],
					yAxis: [{
						type: 'value',
						axisLabel: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						splitLine: {
							show: false
						}
					}],
					series: [{
						name: '今日票数',
						type: 'bar',
						// data: [20, 34, 18, 14, 16],
						data: shujuer,
						barWidth: 22, //柱子宽度
						barGap: 1, //柱子之间间距
						itemStyle: {
							normal: {
								color: '#0071c8',
								opacity: 1,
							}
						}
					}, {
						name: '点击量',
						type: 'bar',
						// data: [10, 24, 5, 24, 16],
						data: shujusan,
						barWidth: 22,
						barGap: 1,
						itemStyle: {
							normal: {
								color: '#fdc508',
								opacity: 1,
							}
						}
					}, {
						name: '总票数',
						type: 'bar',
						// data: [7, 24, 18, 20, 6],
						data: shujusi,
						barWidth: 22,
						barGap: 1,
						itemStyle: {
							normal: {
								color: '#dfeafc',
								opacity: 1,
							}
						}
					}]
				};
				column3.setOption(option);
				window.onresize = function() {
					column3.resize();
				}
			})
		</script>
	</body>
</html>
